<template>
  <div class="header">
    <div class="menu">
      <span class="iconfont icon-caidan2" @click="showSlider"></span>
    </div>
    <div class="title">
      <span>
        {{title}}
      </span>
    </div>
    <div class="search-box">
      <span class="iconfont icon-sousuo"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  methods: {
    showSlider () {
      // alert(1)
      // console.log(this.$store)
      this.$store.dispatch('showSliderBar')
    }
  },
  mounted () {},
  props: {
    title: {
      type: String,
      default: '一个图书'
    }
  }
}
</script>

<style lang="stylus" scoped>
.header
  z-index 1
  width 100%
  color red
  height 1.26rem
  display flex
  justify-content space-between
  align-items center
  padding .14rem 0
  font-size .46rem
  color #000000
  .menu
    padding .29rem
    .icon-caidan2
      font-size .71rem
  .search-box
    padding .29rem
    .icon-sousuo
      font-size .61rem
</style>
